<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Workbook</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale = 1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../assets/css/idox/style.css" rel="stylesheet">
    <link href="../assets/css/idox/animate-custom.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

    <!-- iOS Homescreen Launch Screens -->

    <!-- iPhone 320x460 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px)" href="../assets/img/idox/launch-img/iphone.png">
    <!-- iPhone Retina 640x920 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
          href="../assets/img/idox/launch-img/iphone-hires.png">
    <!-- iPad Portrait 768x10*0*4 -->

    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)"
          href="../assets/img/idox/launch-img/ipad-portrait.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)"
          href="../assets/img/idox/launch-img/ipad-landscape.png">
    <!-- iPad Landscape 748x1024-->
    <link rel="apple-touch-startup-image"
          media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
          href="../assets/img/idox/launch-img/ipad-portrait-hires.png">
    <!-- iPad Portrait Retina 1536x2008 -->
    <link rel="apple-touch-startup-image"
          media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
          href="../assets/img/idox/launch-img/ipad-landscape-hires.png">
    <!-- iPad Landscape Retina 1496x2048 -->


    <!--debug-->
    <script src="http://debug.phonegap.com/target/target-script-min.js#shadowbeam"></script>
</head>

<body>

<header id="app-header" class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid center">
            <div class="pull-left"><a href="#"> <img id="idox-logo" class="pull-left"
                                                     src="../assets/img/idox/mesh.png"/> <span
                    class="brand">Workbook</span> </a></div>
            <div id="top-buttons" class="stage-animation pull-right">
                <div id="top-search" class="menu-btn"><i class="idox-icon-search"></i></div>
                <div id="top-profile" class="menu-btn"><i class="idox-icon-profile"></i></div>
                <div id="top-messages" class="menu-btn "><i class="idox-icon-messages"></i></div>
            </div>
            <div id="simple-search" class="center hide-mobile">
                <form class="navbar-form form-search form-inline">
                    <fieldset>
                        <div id="advanced-search-button" class="menu-btn"><i class="idox-icon-advsearch"></i></div>
                        <input tabindex="1" type="text" placeholder="s" class="input-large search-query">
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</header>

<div class="container-fluid" id="app-body">
    <div id="main" class="page-wrapper">
        <div class="scroller">
            <section class="page vflex" id="main-page">
                <ul class="vflex">
                    <div class="swipe-page">
                        <div class="inner">
                            <h1>Home</h1>
                            <ul class="thumbnails">
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                            </ul>

                            <ul class="thumbnails">
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="swipe-page">
                        <div class="inner">
                            <h2>Work</h2>

                            <p>Use this document as a way to quick start any new project. <br>
                                All you get is this message and a barebones HTML document.</p>
                            <ul class="thumbnails">
                                <li class="span4"><a href="#" class="thumbnail"> <img src="http://placehold.it/360x268"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                                <li class="span2"><a href="#" class="thumbnail"> <img src="http://placehold.it/160x120"
                                                                                      alt=""> </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="swipe-page">
                        <div class="inner">
                            <h2>Inbox</h2>
                        </div>
                    </div>
                    <div class="swipe-page">
                        <div class="inner">
                            <h2>Calendar</h2>
                        </div>
                    </div>
                </ul>
            </section>
        </div>
    </div>
    <!--/page-wrapper-->

    <div id="search-results-wrapper" class="page-wrapper">
        <div class="scroller">
            <section class="page vflex hide" id="search-results">
                <ul>
                </ul>
            </section>
        </div>
    </div>
    <!--/page-wrapper-->


    <div id="search-results-side-wrapper" class="hide page-wrapper span3 hidden-phone">
        <section id="search-results-side"></section>
    </div>


    <div id="full-document-wrapper" class="hide ">

        <div class="full-document scrolling">
            <img src="" class="span6"/>

            <div id="doc-tabs" class="span4 tabbable">

                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Information</a></li>
                    <li><a href="#tab2" data-toggle="tab">History</a></li>
                    <li><a href="#tab3" data-toggle="tab">Security</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <p>Howdy, I'm in Section 2.</p>

                    </div>
                    <div class="tab-pane" id="tab3">
                        <p>Section 3.</p>
                    </div>
                </div>


            </div>
        </div>


    </div>


</div>

<!--/#app-body-->

<footer id="app-footer" class="hide-mobile navbar">
    <div class="navbar-inner">
        <div class="container-fluid row">
            <div class="center no-float">
                <div id="btn-prev" class="menu-btn pull-left"><i class="idox-icon-arrow-left"></i></div>
                <div id="btn-next" class="menu-btn pull-right"><i class="idox-icon-arrow-right"></i></div>
                <div id="slider-buttons">
                    <button tabindex="0" class="tab btn active">Home</button>
                    <button tabindex="1" class="tab btn">Work</button>
                    <button tabindex="2" class="tab btn">Inbox</button>
                    <button tabindex="3" class="tab btn">Calendar</button>
                </div>
            </div>
        </div>
    </div>
</footer>

<div id="advanced-search" class="up-stage stage-animation scrolling">
    <div class="container-fluid">

        <form id="advanced-search-form" class="form-horizontal">

            <h2 class="hidden-phone">Advanced Search</h2>

            <div class="row-fluid">
                <div class="span4">
                    <fieldset>
                        <div class="control-group">
                            <label class="control-label" for="input01">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input01" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input02">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input02" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input03">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input03" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="select04">Select list</label>

                            <div class="controls">
                                <select id="select04">
                                    <option selected disabled>Select List</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="span4 offset1">
                    <fieldset>

                        <div class="control-group">
                            <label class="control-label" for="input05">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input05" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>

                        </div>
                        <div class="control-group">
                            <label class="control-label" for="multiSelect">Multicon-select</label>

                            <div class="controls">
                                <select multiple="multiple" id="multiSelect">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input06">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input06" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>

                        </div>
                    </fieldset>


                </div>
                <!-- /row -->
                <div class="span4">
                    <fieldset>
                        <div class="control-group">
                            <label class="control-label" for="input07">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input07" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input08">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input08" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input09">Text input</label>

                            <div class="controls">
                                <input type="text" class="input-large" id="input09" placeholder="Text input">

                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="select01">Select list</label>

                            <div class="controls">
                                <select id="select01">
                                    <option selected disabled>Select List</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <fieldset class="">
                    <div class="form-actions pull-right">
                        <button id="advanced-search-close" class="btn">Close</button>
                        <button id="advanced-search-submit" data-toggle="modal" href="#loadingModal" type="submit"
                                class="btn btn-primary">Search
                        </button>
                    </div>
                </fieldset>


            </div>
        </form>
    </div>
</div>
<!--/advanced-search-->

<div id="messages" class="panel stage-right stage-animation">
    <div class="messages-header"><i class="idox-icon-fullscreen pull-left full-screen hide-mobile"
            ></i>

        <h2>Joe Bloggs</h2></div>

    <div class="messages-wrapper">
        <div class="messages">
            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

            <article class="message to">
                <header class="box">
                    <time class="pull-right">2012-08-10</time>

                </header>
                <p class="message-body">Your reply. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
                    convallis rutrum auctor. Etiam enim neque, ultrices sit amet vestibulum vel, iaculis sit amet erat.
                    Ut libero nunc, ultrices eget blandit eu, dictum ut mauris.

                </p>

            </article>

            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

            <article class="message to">
                <header class="box">
                    <time class="pull-right">2012-08-10</time>

                </header>
                <p class="message-body">Your reply. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
                    convallis rutrum auctor. Etiam enim neque, ultrices sit amet vestibulum vel, iaculis sit amet erat.
                    Ut libero nunc, ultrices eget blandit eu, dictum ut mauris.

                </p>

            </article>

            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

            <article class="message from">
                <header class="box">
                    <time class="pull-left">2010-08-9</time>

                </header>
                <p class="message-body">A message from someone. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nulla convallis rutrum auctor.
                </p>

            </article>

        </div>


    </div>
    <div class="message-reply">
        <form id="message-reply-form" class="navbar-form form-search form-inline" onSubmit="return false;">
            <fieldset>

                <textarea tabindex="-1" id="message-reply-field" type="text" placeholder="Message"
                          class="input"></textarea>

                <button id="message-reply-button"> Send</button>
            </fieldset>
        </form>

    </div>


</div>
<!--/messages-->


<div class="modal" id="loadingModal" style="display:none;">
    <div>
        <p align="center"><i class=" idox-icon-delicious anim-rotate" data-icon="$"></i></p>

        <p align="center">Loading...</p>
    </div>
</div>
<!--/modal-->

<div id="profile" class="panel stage-left stage-animation">
    <div class="profile-header"><h2 class="hidden-phone">Profile</h2></div>
    <p>Swipe from right to left to close</p>
</div>
<!--/Profile-->


<!-- Le javascript==================================================-
->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>

<!---idox scripts -->
<script src="../assets/js/idox/modernizr.js"></script>
</body>
</html>